<!-- 检测项目占用设备时间设置 -->
<template>
  <div id="dialog-container">
    <el-button type="text"  @click="handleClose">检测项目占用设备时间设置</el-button>
    <el-dialog v-dialogDrag :title="'检测项目占用设备时间提示'" :fullscreen="isFullScreen" :custom-class="isFullScreen?'fullscreen-default-dialog':'vertical-center-dialog'" append-to-body :visible.sync="dialogVisible" :close-on-click-modal="false" width="1000px">
      <button type="button" aria-label="fullScreen" class="el-dialog__headerbtn" style="margin-right:25px;top:" @click="isFullScreen = !isFullScreen">
                                                                                                  <i class="el-dialog__close iconfont icon-fuzhicopy22"></i>
                                                                                                </button>
      <el-form :model="formData" :inline="true" size="small" label-width="80px">
            <el-form-item label="检测项目：">
               <el-input v-model="formData.fieldName"></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 20px;">
            <el-button size="mini" type="primary" @click="showList">查询</el-button>
        </el-form-item>
        <el-form-item>
            <el-button size="mini" @click='clearForm'>清除</el-button>
        </el-form-item>
          <el-form-item>
            <el-button size="mini" @click="addFieldOccupyTimeSetting" >新增</el-button>
        </el-form-item>
             <add-occupy-completion-time-setting  :show.sync="isShowAddName" :modifyId.sync="modifyId" @refreshAdd="showList"></add-occupy-completion-time-setting>
      <div style="float: left;padding-left: 20px;font-size: 15px;color: #666;padding-top: 6px;">
          共 <span style="color: red;">{{pageTotal}}</span> 条数据
      </div>
      <el-table :data="tableData" size="small">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column type="index" align="center" label="序号" width="50"></el-table-column>
        <el-table-column prop="fieldName" align="center" label="检测项目" min-width="100"></el-table-column>
        <el-table-column prop="occupy" align="center" label="分钟" min-width="100"></el-table-column>
        <el-table-column prop="address" align="center" label="操作" min-width="100">
            <template slot-scope="scope">
                <el-button type="text" @click="modifyOrder(scope.row)">编辑</el-button>
                <el-button type="text" @click="deleteFieldOccupyTimeSetting(scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArr"
                :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"></el-pagination>
      </el-row>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import addOccupyCompletionTimeSetting from "dialog/resource-management/maintenance-of-basic-information/add-occupy-completion-time-setting";
  import { getFieldOccupyTimeSettingList, deleteFieldOccupyTimeSetting } from 'service/task';
  export default {
     name: "AddOccupyCompletionTimeSettingCompnent",
    components: {
      "add-occupy-completion-time-setting": addOccupyCompletionTimeSetting
    },
    data() {
      return {
        dialogVisible: false,
        isFullScreen: false,
        formData: {
          fieldName: '',
          occupy: ''
        },
        fieldNameOption: [{
          value: '委托型',
          label: '委托型',
        }, {
          value: '生产型',
          label: '生产型',
        }, {
          value: 'MES系统推送',
          label: 'MES系统推送'
        }],
        isLoading: false,
        tableData: [],
        modifyId: null,
        isShowAddName: false, // 新增检测类型
        currentPage: 1,
        pageSizeArr: [10, 20, 50, 100],
        pageSize: 10,
        pageTotal: 10
      }
    },
    mounted() {
      this.showList();
    },
    methods: {
      clearForm() {
      this.formData = {};
      this.showList();
    },
      handleClose() { /* 关闭的时候更新状态值 */
        this.dialogVisible = true;
      },
      // 新增检测类型
      addFieldOccupyTimeSetting() {
        this.modifyId = null;
        this.isShowAddName = true;
      },
      // 修改检测类型
      modifyOrder(row) {
        this.modifyId = row.id;
        this.isShowAddName = true;
      },
       deleteFieldOccupyTimeSetting(row) {
        let confirm = this.$confirm('您确定删除吗?','提示',{
          // confirmButtonText: '确定',
          // cancelButtonText: '取消',
          type: 'warning'
        }).then(res => {
         deleteFieldOccupyTimeSetting(row.id).then(res => {
        if (res.data.success) {
          this.$message({
            message: res.data.message,
            type: 'success',
            duration: 1000
            });
          this.showList();
        }
      });
      }).catch(res => {
         return
     });
    },
    handleSizeChange(val) {
        this.pageSize = val;
        this.showList();
    },
    handleCurrentChange(val) {
        this.currentPage = val;
        this.showList();
    },
      // 表格数据展示
      showList() {
        this.loading = true;
        getFieldOccupyTimeSettingList({
          occupy: this.formData.occupy,
          fieldName: this.formData.fieldName,
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          sort: "",
          order: ""
        }).then(res => {
          this.tableData = res.data.result.content;
          //this.currentPage = res.data.result.pageable.pageNumber;
          this.pageSize = res.data.result.pageable.pageSize;
          this.pageTotal = res.data.result.totalElements;
          this.loading = false;
        });
      },// 表头展示
      getTableHeaderLabel(str) {
        return this.getTableSomeValue(str, "alias");
      },
      // 获取表格列的宽度
      getTableColumnWidth(str) {
        return this.getTableSomeValue(str, "width");
      },
      // 获取表格列是否是固定的
      getTableColumnFixed(str) {
        return this.getTableSomeValue(str, "fixed");
      },
      // 获取表格列是否排序
      getTableColumnSort(str) {
        return this.getTableSomeValue(str, "sort");
      },
      // 获取表格表头，列宽度，列固定，列排序的值
      getTableSomeValue(str, keyName) {
        for (var value of this.tableHeaderArr) {
          if (value["name"] == str) {
            return value[keyName];
          }
        }
      }
    }
  }
</script>
